<template>
  <div>
    <template v-if="visible">
      <div style="margin-bottom: 16px">
        <a-alert :message="message" :after-close="handleProjectClose" type="info" closable banner />
      </div>
    </template>
    <a-card :title="t('dashboard.user-info.userWork.projectCardTitle')">
      <template v-for="(item, index) in projectList" :key="index">
        <a-card-grid style="width: 50%; text-align: center">
          <a-card-meta>
            <template #title>
              <a target="_blank" :href="item.url">{{ item.name }}</a>
            </template>
            <template #description>
              <span>{{ item.description }}</span>
            </template>
          </a-card-meta>
          <div class="user-info-project-card-footer">
            <div class="user-info-project-card-footer-item">
              <a target="_blank" :href="item.url + '/watchers'">
                <qc-icon type="icon-watch"></qc-icon>
              </a>
              <span>{{ item.watchers }}</span>
            </div>
            <div class="user-info-project-card-footer-item">
              <a target="_blank" :href="item.url + '/stargazers'">
                <qc-icon type="icon-star"></qc-icon>
              </a>
              <span>{{ item.stargazers }}</span>
            </div>
            <div class="user-info-project-card-footer-item">
              <a target="_blank" :href="item.url + '/members'">
                <qc-icon type="icon-fork"></qc-icon>
              </a>
              <span>{{ item.forks }}</span>
            </div>
          </div>
        </a-card-grid>
      </template>
    </a-card>
  </div>
</template>
<script lang='ts'>
import { defineComponent, onMounted, reactive, Ref, ref, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import { getPublicRepos } from '/@/api/external/gitee'
export default defineComponent({
  name: 'UserWorkProject',
  emits: ['changeProjectCount'],
  setup(props, { emit }) {
    const { t } = useI18n()
    const projectList: Ref<Array<any>> = ref([])
    const alertState = reactive({
      visible: true,
      message: t('dashboard.user-info.userWork.projectAlertMessage'),
      handleProjectClose: () => {
        alertState.visible = false
      },
    })

    onMounted(() => {
      getPublicRepos().then((res) => {
        projectList.value = res.data.data || []
        emit('changeProjectCount', projectList.value.length)
      })
    })
    return {
      t,
      projectList,
      ...toRefs(alertState),
    }
  },
})
</script>
<style lang='less' scoped>
.user-info-project-card-footer-item > a {
  color: rgba(0, 0, 0, 0.85);
  transition: all 0.3s;
  font-size: 16px;
  font-weight: 700;
}
.user-info-project-card-footer {
  float: right;
}
.user-info-project-card-footer-item {
  display: inline-block;
  padding: 6px 8px 0px 8px;
}

.user-info-project-card-footer-item .anticon {
  cursor: pointer;
}

.user-info-project-card-footer-item > span {
  margin-left: 3px;
}
</style>